<template>
  <div class="row">
    <div class="col-md-12">
      <!--桥梁、处治方式主体-->
      <div class="row">
        <!--处治方式及维修费用统计-->
        <div class="col-md-8">
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">处治措施费用统计图</h3>
            </div>
            <div class="box-body">
              <div id="treatmentCostCharts" style="display: inline-block;height: 400px;width: 100%;"></div>
            </div>
          </div>
        </div>
        <!--处治费用桥梁排行-->
        <div class="col-md-4">
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">养护费用Top10</h3>
              <!--  返回按钮  -->
              <div class="box-tools pull-right">
                <el-button @click="$emit('onBack')"><i class="fa fa-chevron-left"></i>&nbsp;&nbsp;返回</el-button>
              </div>
            </div>
            <div class="box-body">
              <div id="bridgeCostCharts" style="display: inline-block;height: 400px;width: 100%;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import echarts from "../../echarts"
  import {getTreatmentCostChartsOptions, getBridgeCostChartsOptions} from "../../assets/js/utils/ViewUtils"

  export default {
    name:"MaintainStatistic",
    props:{
      data:{
        type:Object,
        required:true
      }
    },
    mounted() {
      echarts.init(document.getElementById("treatmentCostCharts")).setOption(getTreatmentCostChartsOptions(this.data.treatmentCostStatistic.treatmentTypeList, this.data.treatmentCostStatistic.costList));
      echarts.init(document.getElementById("bridgeCostCharts")).setOption(getBridgeCostChartsOptions(this.data.bridgeCostStatistic.bridgeNameList, this.data.bridgeCostStatistic.costList));
    }
  }
</script>



// WEBPACK FOOTER //
// MaintainStatistic.vue?48b2fe5d
